<!DOCTYPE html>
<html>
    <head>
        <style>
            .row{
                display: block;
            }
            a, span{
                margin-left: 2px;
                margin-right: 2px;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="show_all">
                showAll
            </button>
            <button id="show_show">
                show✅
            </button>
            <button id="show_hide">
                show❌
            </button>
        </div>
        <pre class="row">show_in_homeActivity    mode_time    link&id    video_date    views    upper    title</pre>
        <div id="root">
            <!-- <ol id="list">

            </ol> -->
        </div>
    </body>
    <script>
        const url="http://tv.server.lan:19999/tv_others/category/pushed/1/";
        const url_show_toggle="http://tv.server.lan:19999/api/tvboxpush/dir2/";
        const update_show_toggle=(name,isDel,onsuccess)=>{
            let u=url_show_toggle+"?name="+encodeURIComponent(name);
            if(isDel){
                u=`${u}&del=1`;
            }
            fetch(u).then(
                r=>r.text()
            ).then(
                text=>{
                    text=text.toLowerCase();
                    ok=text==="ok";
     
                    if(!ok){
                        return;
                    }
                    if(onsuccess){
                        onsuccess();
                    }
                }
            )
        }

        const rootDiv=document.querySelector("#root");
        const getPage=(page)=>{
            fetch(`${url}${page}?showall=1`).then(res=>res.json())
            .then(obj=>{
                console.log(obj);
                genList(obj);
            })
            .catch(e=>{
                console.log(e);
            })
        }
        
        const createLi=()=>{
            let li=document.createElement("li");
            li.add=(tag,innerText)=>{
                let el=document.createElement(tag);
                li.appendChild(el);
                if(innerText){
                    // el.innerText=innerText;
                    el.textContent=innerText;
                }
                return el;
            }
            return li;
        }

        const getNameID=(obj)=>{
            let id0=obj.vod_id;
            try{
                let ids=id0.split("/");
                let file_name=ids[ids.length-1];
                let name= file_name.replace(/\.json$/,"");
                let id= name.replace(/^bilibili_/,"");
                return {
                    name:name,
                    id:id,
                };
            }catch{
                return {
                    name:"",
                    id:"",
                };
            }
        }

        const getDate=(t)=>{
            let date;
            if(t){
                date=new Date(t*1000);//s->ms
                return `${date.getFullYear()}/${date.getMonth()}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
            }else{
                return "yyyy/??/?? ??:??:??";
            }
        }

        const TOGGLE={
            lines:[],
            // 使用 this. 在使用箭头函数时会失效! ()=>{}
            push(o){
                if(!o)return;
                TOGGLE.lines.push(o);
            },
            show_all(){
                for(let i=0;i< TOGGLE.lines.length;i++){
                    let o=TOGGLE.lines[i];
                    let li=o.line;
                    li.style.display="";
                }
            },
            show_show(){
                for(let i=0;i< TOGGLE.lines.length;i++){
                    let o=TOGGLE.lines[i];
                    let li=o.line;
                    let obj=o.obj;
                    if(obj.show){
                        li.style.display="";
                    }else{
                        li.style.display="none";
                    }
                }
            },
            show_hide(){
                for(let i=0;i< TOGGLE.lines.length;i++){
                    let o=TOGGLE.lines[i];
                    let li=o.line;
                    let obj=o.obj;
                    if(obj.show){
                        li.style.display="none";
                    }else{
                        li.style.display="";
                    }
                }
            }
        };

        const bind_id_and_click=(id,onclick)=>{
            let btn=document.getElementById(id);
            if(!btn)return;
            if(onclick){
                btn.addEventListener("click",()=>{
                    onclick();
                });
            }
        }
        bind_id_and_click("show_all",TOGGLE.show_all);
        bind_id_and_click("show_show",TOGGLE.show_show);
        bind_id_and_click("show_hide",TOGGLE.show_hide);

        const genRow=(obj)=>{
            let name_id=getNameID(obj);
            let id=name_id.id;
            let name=name_id.name;
            // let li=document.createElement("li");

            let li=createLi();
            TOGGLE.push({
                line:li,
                obj:obj,
            });
            {
                let getTxt=(obj)=>{
                    return obj.show?"✅":"❌";
                }
                let show_toggle=li.add("span",getTxt(obj));
                if(name){
                    show_toggle.addEventListener("click",()=>{
                        update_show_toggle(name,obj.show,()=>{
                            console.log("obj.show ==",obj.show);
                            obj.show=!obj.show;
                            console.log("obj.show=",obj.show);
                            show_toggle.textContent=getTxt(obj);
                        });
                    });
                }
            }
            

            // {};
            li.add("span",getDate(obj.mode_time));

            // a.href="https://www.bilibili.com/video/";
            // // href="https://www.bilibili.com/video/av113282497186847"

            
            let href;
            if(id.startsWith("season_id_")){
                href="https://www.bilibili.com/bangumi/play/ss"+id.replaceAll("season_id_","");
            }else{
                href="https://www.bilibili.com/video/av"+id;
            }
            // season_id_28884
            
            let a=li.add("a",id);
            a.href=href;
            a.target="_blank";
            
            li.add("span","\t\t");
            li.add("span",obj.vod_year);
            li.add("span","\t\t");
            li.add("span",obj.vod_remarks);
            li.add("span","\t\t");
            li.add("span",obj.vod_director);
            li.add("span","\t\t");
            li.add("span",obj.vod_name);
            return li;
        }

        function genList(obj){
            if(!obj){
                return
            }
            let pages=obj.pagecount;
            let page=obj.page;
            if(obj.list){
                let pageInfo=document.createElement("h1");
                pageInfo.innerText=page;
                // let ol=document.createElement("ol");
                let ol=document.createElement("ul");
                for(let i in obj.list){
                    let vod=obj.list[i];
                    let row=genRow(vod);
                    ol.appendChild(row);
                }
                rootDiv.appendChild(pageInfo);
                rootDiv.appendChild(ol);
            }
            
            if(page){
                if(page>=pages){
                    return;
                }
                setTimeout(()=>{
                  getPage(page+1);
                },500);
            }
        }

        const start=()=>{
            getPage(1);
        }
        start();
        // http://tv.server.lan:19999/tv_others/category/bili/1/1
    </script>
</html>